<template>
  <div>
    <contract-list-com :contractList="itemList" class="contract__list-div" @onChange="selectGroup"></contract-list-com>
    <div class="van-submit-bar contract__list-submit-bar">
      <van-button color="#F44336" class="contract__list-submit-btn" @click="onBuy">购买</van-button>
    </div>
  </div>
</template>

<script>
import storage from "../store/storage";
import ContractListCom from "../components/ContractListCom";
export default {
  data() {
    return {
      itemList: [],
      selectContracts: [],
    };
  },
  components: {
    ContractListCom,
  },
  mounted() {
    this.onGetItemList();
    console.log("aaaaaaaa", storage.get("token"));
    this.test();
  },
  methods: {
    selectGroup(checkboxGroup) {
      console.log(checkboxGroup);
      this.selectContracts = checkboxGroup;
    },
    onBuy() {
      this.$router.push({
        path: `/shopping-list`,
        query: {
          contracts: this.selectContracts,
        },
      });
    },

    test() {
      this.$axios
        .get("/api/demo/hello")
        .then((res) => {
          console.log("bbbbb", res);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    onGetItemList() {
      this.$axios
        .request({
          url: "/api/contract/contract-list",
          method: "post",
          headers: { "content-type": "application/x-www-form-urlencoded" },
          data: {
            mobile: "13739983630",
            flag: "1",
          },
        })
        .then((res) => {
          this.itemList = res.data.data.result;
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>

<style scoped>
.contract__list-div {
  margin-bottom: 50px;
}
.contract__list-submit-bar {
  text-align: center;
  padding: 10px 0;
}
.contract__list-submit-btn {
  width: 343px;
  height: 44px;
}
.contract__list-div {
  margin-top: 45px;
  margin-bottom: 50px;
}
</style>